<!--
 * @Author: Redbin
 * @Date: 2022-04-08 15:52:55
 * @LastEditTime: 2022-04-18 17:15:20
 * @LastEditors: Redbin
 * @Description: 
 * @FilePath: /wisdom-website/components/CuSwiper.vue
 * 以诗的格调出场，才对的起你流光溢彩的眼眸
-->
<template>
    <!-- s 轮播区-->
    <div :id="swiperId" class="swiper">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
        <template v-if="navigation">
            <div :class="prevClass"></div>
            <div :class="nextClass"></div>
        </template>
        <div v-if="pagination" :class="paginationClass"></div>
    </div>
    <!-- e 轮播区-->
</template>

<script>
export default {
    props: {
        swiperId: {
            type: String,
            default: 'swiperId'
        },
        option: {
            type: Object,
            default: () => {}
        },
        direction: {
            type: String,
            default: 'horizontal'
        },
        nextEl: {
            type: String,
            default: '.swiper-button-next'
        },
        prevEl: {
            type: String,
            default: '.swiper-button-prev'
        },
        paginationEl: {
            type: String,
            default: '.swiper-pagination'
        },
        loop: {
            type: Boolean,
            default: false
        },
        autoplay: {
            type: [Boolean, Object],
            default: false
        },
        pagination: {
            type: Boolean,
            default: false
        },
        paginationClass: {
            type: String,
            default: 'swiper-pagination'
        },
        navigation: {
            type: Boolean,
            default: false
        },
        nextClass: {
            type: String,
            default: 'swiper-button-next'
        },
        prevClass: {
            type: String,
            default: 'swiper-button-prev'
        },
        freeMode: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        setTimeout(() => {
            const option = Object.assign({
                slidesPerView: 'auto',
                autoplay: this.autoplay,
                freeMode: this.freeMode,
                // Optional parameters
                direction: this.direction,
                loopAdditionalSlides: 2,
                loop: this.loop,
                // If we need pagination
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                // Navigation arrows
                navigation: {
                    nextEl: `.${this.nextClass}`,
                    prevEl: `.${this.prevClass}`,
                }
            }, this.option)
            const swiper = new window.Swiper(`#${this.swiperId}`, option);
            console.log(` ~ mounted ~init ~ swiper id=`, swiper)
        }, 500)
    }
}
</script>

<style scoped>
.swiper-button-prev {
    position: absolute;
    left: 0;
    @apply w-8 h-8 md:w-14 md:h-14;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 24px;
    background: #fff;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    @apply text-xs md:text-2xl;
}
.swiper-button-next {
    position: absolute;
    right: 0;
    @apply w-8 h-8 md:w-14 md:h-14;
}
</style>